<template>
<div>
    <div class='main'>
		<!-- 头部信息 -->
		<div class='main-top'>
			<div class='main-title'>处方笺</div>
			<div class='main-info'>
				<div class='main-info-item'>
					姓名：
                    <span>{{doctor.name}}</span>
				</div>
				<div class='main-info-item'>
					性别
				</div>
				<div class='main-info-item'>
					年龄
				</div>
			</div>
			<div class='main-info'>
				<div class='main-info-item'>
					科室
				</div>
				<div class='main-info-item'>
					医生:
                    <span>{{doctor.name}}</span>
				</div>
			</div>
		</div>

		<!-- 主要信息 -->
		<div class='main-bottom'>
			<div class='main-desc'>
				<div class='desc-left'>主诉：</div>
				<div class='desc-right'>
					主诉主诉主诉主诉主诉主诉s说明说明主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉
				</div>
			</div>
			<div class='main-desc'>
				<div class='desc-left'>主诉：</div>
				<div class='desc-right'>
					主诉主诉主诉主诉主诉主诉s说明说明主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉
				</div>
			</div>
			<div class='main-desc'>
				<div class='desc-left'>主诉：</div>
				<div class='desc-right'>
					主诉主诉主诉主诉主诉主诉s说明说明主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉
				</div>
			</div>
			<div class='main-desc'>
				<div class='desc-left'>诊疗建议：</div>
				<div class='desc-right'>
					主诉主诉主诉主说明说是的那份温暖诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉主诉
				</div>
			</div>

		</div>

		<!-- 处方信息 -->
		<div class='main-pres'>
			<div>处方：</div>
			<div class='pres-wrap'>
				<div class='pres-item'>药品名称</div>
				<div class='pres-item'>数量（规格）</div>
				<div class='pres-item'>用量（单位）</div>
				<div class='pres-item'>频次</div>
				<div class='pres-item'>用药途径</div>
			</div>
			<div class='pres-wrap'>
				<div class='pres-item'>药1</div>
				<div class='pres-item'>3*100g</div>
				<div class='pres-item'>2*10g</div>
				<div class='pres-item'>1/日</div>
				<div class='pres-item'>口服</div>
			</div>
			<div class='pres-wrap'>
				<div class='pres-item'>药1</div>
				<div class='pres-item'>3*100g</div>
				<div class='pres-item'>2*10g</div>
				<div class='pres-item'>1/日</div>
				<div class='pres-item'>口服</div>
			</div>
		</div>

		<!-- 尾部说明 -->
		<div class='main-tail'>
			<div class='main-tail-item'>
					接诊时间：2024年xx月xx日
			</div>
			<div class='main-tail-item'>
					医生签字（盖章）：
			</div>
		</div>
	</div>
</div>
  
</template>

<script>
export default {
  name: 'Prescription',
  data() {
        return {
            doctor: JSON.parse(localStorage.getItem('CurUser')),
            DoctorData:[],  //科室
            tableData:[],  //医生信息
            pageSize:20,
            pageNum:1,
            total:0,
            name:'',
            centerDialogVisible:false,
            form:{
                name:'',
                roleId:''
            },
            rules:{
                name:[
                    {required:true,message:'请输入姓名',trigger:'blur'},
                ],
            }

        }
    },
    methods:{
        formatDoctor(row){
            let temp = this.DoctorData.find(item=>{
                return item.id == row.position
            })
            return temp && temp.name
        },

        add(){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.resetForm() 
                this.form.id = ''})
        },

        mod(row){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.form.id = row.id
                this.form.name = row.name
            })
        },
        //  编辑/更新 功能
        doMod(){
            this.$axios.post('http://localhost:8090/dep/update',this.form).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.$message({message:"成功",type:'success'})
                        this.centerDialogVisible = false
                       
                    }else{
                    this.$message({message:"失败",type:'error'})
                    }
                })
        },
        
        doSave(){
            this.$axios.post('http://localhost:8090/dep/save',this.form).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                     this.$message({message:"成功",type:'success'})
                     this.centerDialogVisible = false
                     
                    }else{
                    this.$message({message:"失败",type:'error'})
                    }
                })
        },

        save(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    if(this.form.id){
                        this.doMod();
                    }else{
                        this.doSave();
                    }
                }else{
                    console.log('error submit!!')
                    return false;
                }
            });

            
        },
        
        resetForm(){
            this.$refs.form.resetFields();
        },


        resetParam(){
            this.name='';
        },

        
        loadDoctor(){
            this.$axios.get('http://localhost:8090/doctor/list').then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                     this.DoctorData=res.data
                    
                }else{
                    alert('获取数据失败')
                }
               
            })
        },
        loadAc(){
            this.$axios.post('http://localhost:8090/doctor/listC',{ //data  this.调用定义的data里面数据
                param:{
                    ac:this.doctor.ac,
                }
            }).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                     this.tableData=res.data
                }else{
                    alert('获取数据失败')
                }
               
            })

        }
    },
    beforeMount(){
        this.loadAc()
        this.loadDoctor()
    }


 
  
}
</script>


<style scoped>
.main {
    padding: 15px;
}
.main .main-top {
    padding: 15px 0;
    border-bottom: 2px solid #333;
}
.main .main-top .main-title {
    padding-bottom: 15px;
    color: #333;
    text-align: center;
    font-weight: bold;
    font-size: 45px;
}
.main .main-top .main-info{
    display: flex;
    align-items: center;
    padding-bottom: 5px;
}
.main .main-top .main-info .main-info-item {
    flex:1;
}
.main .main-bottom{
    padding: 15px 0;
}
.main .main-bottom .main-desc {
    display: flex;
}
.main .main-bottom .main-desc .desc-left{
    width: 100px;
}
.main .main-pres .pres-wrap {
    display: flex;
    align-items: center;
}
.main .main-pres .pres-wrap .pres-item {
    flex: 1;
}
.main .main-tail {
    display: flex;
    padding:15px 0;
}
.main .main-tail .main-tail-item {
    flex: 1;
    text-align: center;
}

</style>
